<template>
    <!-- 文本 -->
    <p>Message is: {{ message }}</p>
    <input v-model="message" placeholder="edit me" />    
    <!-- v-model的作用就是，双向绑定了，页面的input的value和message绑定了 -->
    <!-- 原生input的value控制着input框的值 -->
    <!--  文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件； -->

    <p>------------</p>
    
    <!-- 多行文本 -->
    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{ message2 }}</p>
    <textarea v-model="message2" placeholder="add multiple lines"></textarea>

    <p>------------</p>

    <!-- 复选框 -->
    <!-- 单一的复选框，绑定布尔类型值： -->
    <input type="checkbox" id="checkbox" v-model="checked" />
    <!-- checkbox的v-model会和原生的checked属性进行双向绑定 -->
    <!-- 双向绑定就是 -->
    <!-- <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件； -->
    <label for="checkbox">{{ checked }}</label>

    <p>------------</p>

    <!-- 复选框 -->
    <!-- 我们也可以将多个复选框绑定到同一个数组或集合的值： -->
    <!-- v-model会把checkbox的value双向绑定到一个数组或者集合中 -->
    <div>Checked names: {{ checkedNames }}</div>
    
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">复选框1</label>

    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">复选框2</label>

    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">复选框3</label>

    <p>------------</p>

    <!-- 单选按钮 -->
    <!-- 选中时,v-model将radio的value属性双下绑定到picked -->
    <div>Picked: {{ picked }}</div>

    <input type="radio" id="one" value="One" v-model="picked" />
    <label for="one">One</label>

    <input type="radio" id="two" value="Two" v-model="picked" />
    <label for="two">Two</label>
    
    <p>------------</p>
    <!-- 选择器 -->
    <!-- 单个选择器的示例如下： -->
    <!-- 选中时,v-model将select的option的value属性(如果没有则是下拉值A)双向绑定到selected -->
    <div>Selected: {{ selected }}</div>

    <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option value="aaaaaa">A</option>
        <option>B</option>
        <option>C</option>
    </select>

    <p>------------</p>

    <!-- 选择器 -->
    <!-- 多选 (值绑定到一个数组)： -->
    <div>Selected: {{ selected }}</div>

    <select v-model="selected" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    </select>

    <p>------------</p>

    <!-- 选择器的选项可以使用 v-for 动态渲染： -->
    <select v-model="selected">
    <option v-for="option in options" :value="option.value" :key="option.value">
        {{ option.text }} 
    </option>
    </select>

<div>Selected: {{ selected }}</div>


</template>

<script setup>
import {ref} from 'vue'

const message = ref('')
const message2 = ref('')
const checked = ref(true)
const checkedNames = ref([])
const picked = ref(true)
const selected = ref('')

const options = ref([
    { text: 'One', value: 'A' },
    { text: 'Two', value: 'B' },
    { text: 'Three', value: 'C' }
])


</script>